//所有import写在代码最上方,react必须导入
import React, { Component } from 'react';
import {View, Button, Image} from 'react-native';
import ImagePicker from 'react-native-image-picker'
//组件必须以下列模板进行构建
export default class Me extends Component {
  //g构造函数，必需
  constructor(props){
    super(props)
    //存放组件的独立数据
    this.state = {
      imgUrl:'http://www.xker.com/xkerfiles/allimg/1603/1_160330092349_3.jpg',
      options:{
        //底部弹出层的选项
        title: '请选择',
        cancelButtonTitle: '取消',
        takePhotoButtonTitle: '拍照',
        chooseFromLibraryButtonTitle: '选择相册',
        quality: 0.75, // 照片的质量
        allowsEditing: true, // 允许被编辑
        noData: false, // 拍照时候不附带日期
        storageOptions: { // 存储选项
          skipBackup: true, // 在IOS平台中，会自动把 照片同步到 云端的存储，如果此项为 true，表示跳过 备份，不会把照片上传到 云端
          path: 'images'
        }
      }
    }
  }
  //渲染组件
  render(){
    return <View style={{alignItems:'center',paddingTop:70}}>
      <Image source={{uri:this.state.imgUrl}} style={{ width: 200, height: 200, borderRadius: 100 }}></Image>
      <Button title="拍照" onPress={this.showCamera}></Button>
    </View>
  }
  showCamera = () => {
    ImagePicker.showImagePicker(this.state.options,(response) => {
      if(response.didCancel) return
      this.setState({
        imgUrl:response.uri
      })
    })
  }
}